<template>
  <div>
    <img  class="header" alt="" src="/static/images/header.jpg">
    <img  class="content" alt="" src="/static/images/contentHeader.jpg">


    <scroll-view class="scrollX" scroll-x="true" bindscroll="scroll"
                 style="width: 100%">

      <div class="scrollXItem"  @click="todetail(201616060301)">
        <img class="ximg" src="http://43.226.148.67:5000/icon/1.jpg"/>
        <p class="title">小镇珊珊毛织上衣</p>
        <p class="price">￥138</p>
        <s class="orprice">￥666</s>
      </div>

      <div class="scrollXItem"  @click="todetail(201616060302)">
        <img class="ximg" src="http://43.226.148.67:5000/icon/2.jpg"/>
        <p class="title">美艳纯红礼服连衣裙</p>
        <p class="price">￥138</p>
        <s class="orprice">￥158</s>
      </div>

      <div class="scrollXItem"  @click="todetail(201616060303)">
        <img class="ximg" src="http://43.226.148.67:5000/icon/3.jpg"/>
        <p class="title">Intel酷睿i9游戏水冷主机</p>
        <p class="price">￥8399</p>
        <s class="orprice">￥10500</s>
      </div>

      <div class="scrollXItem"  @click="todetail(201616060304)">
        <img class="ximg" src="http://43.226.148.67:5000/icon/4.jpg"/>
        <p class="title">汤臣倍健蛋白粉</p>
        <p class="price">￥308</p>
        <s class="orprice">￥338</s>
      </div>

      <div class="scrollXItem"  @click="todetail(201616060302)">
        <img class="ximg" src="http://43.226.148.67:5000/icon/2.jpg"/>
        <p class="title">美艳纯红礼服连衣裙</p>
        <p class="price">￥138</p>
        <s class="orprice">￥158</s>
      </div>

      <div class="scrollXItem"  @click="todetail(201616060303)">
        <img class="ximg" src="http://43.226.148.67:5000/icon/3.jpg"/>
        <p class="title">Intel酷睿i9游戏水冷主机</p>
        <p class="price">￥8399</p>
        <s class="orprice">￥10500</s>
      </div>

      <div class="scrollXItem"  @click="todetail(201616060301)">
        <img class="ximg" src="http://43.226.148.67:5000/icon/1.jpg"/>
        <p class="title">小镇珊珊毛织上衣</p>
        <p class="price">￥138</p>
        <s class="orprice">￥666</s>
      </div>

    </scroll-view>
    <scroll-view class="scrollX" scroll-x="true" bindscroll="scroll"
                 style="width: 100%">



      <div class="scrollXItem"  @click="todetail(201616060303)">
        <img class="ximg" src="http://43.226.148.67:5000/icon/3.jpg"/>
        <p class="title">Intel酷睿i9游戏水冷主机</p>
        <p class="price">￥8399</p>
        <s class="orprice">￥10500</s>
      </div>

      <div class="scrollXItem"  @click="todetail(201616060304)">
        <img class="ximg" src="http://43.226.148.67:5000/icon/4.jpg"/>
        <p class="title">汤臣倍健蛋白粉</p>
        <p class="price">￥308</p>
        <s class="orprice">￥338</s>
      </div>

      <div class="scrollXItem"  @click="todetail(201616060302)">
        <img class="ximg" src="http://43.226.148.67:5000/icon/2.jpg"/>
        <p class="title">美艳纯红礼服连衣裙</p>
        <p class="price">￥138</p>
        <s class="orprice">￥158</s>
      </div>

      <div class="scrollXItem"  @click="todetail(201616060303)">
        <img class="ximg" src="http://43.226.148.67:5000/icon/3.jpg"/>
        <p class="title">Intel酷睿i9游戏水冷主机</p>
        <p class="price">￥8399</p>
        <s class="orprice">￥10500</s>
      </div>

      <div class="scrollXItem"  @click="todetail(201616060301)">
        <img class="ximg" src="http://43.226.148.67:5000/icon/1.jpg"/>
        <p class="title">小镇珊珊毛织上衣</p>
        <p class="price">￥138</p>
        <s class="orprice">￥666</s>
      </div>

      <div class="scrollXItem"  @click="todetail(201616060302)">
        <img class="ximg" src="http://43.226.148.67:5000/icon/2.jpg"/>
        <p class="title">美艳纯红礼服连衣裙</p>
        <p class="price">￥138</p>
        <s class="orprice">￥158</s>
      </div>

      <div class="scrollXItem"  @click="todetail(201616060301)">
        <img class="ximg" src="http://43.226.148.67:5000/icon/1.jpg"/>
        <p class="title">小镇珊珊毛织上衣</p>
        <p class="price">￥138</p>
        <s class="orprice">￥666</s>
      </div>

    </scroll-view>
    <scroll-view class="scrollX" scroll-x="true" bindscroll="scroll"
                 style="width: 100%">

      <div class="scrollXItem"  @click="todetail(201616060302)">
        <img class="ximg" src="http://43.226.148.67:5000/icon/2.jpg"/>
        <p class="title">美艳纯红礼服连衣裙</p>
        <p class="price">￥138</p>
        <s class="orprice">￥158</s>
      </div>

      <div class="scrollXItem"  @click="todetail(201616060303)">
        <img class="ximg" src="http://43.226.148.67:5000/icon/3.jpg"/>
        <p class="title">Intel酷睿i9游戏水冷主机</p>
        <p class="price">￥8399</p>
        <s class="orprice">￥10500</s>
      </div>

      <div class="scrollXItem"  @click="todetail(201616060301)">
        <img class="ximg" src="http://43.226.148.67:5000/icon/1.jpg"/>
        <p class="title">小镇珊珊毛织上衣</p>
        <p class="price">￥138</p>
        <s class="orprice">￥666</s>
      </div>

      <div class="scrollXItem"  @click="todetail(201616060304)">
        <img class="ximg" src="http://43.226.148.67:5000/icon/4.jpg"/>
        <p class="title">汤臣倍健蛋白粉</p>
        <p class="price">￥308</p>
        <s class="orprice">￥338</s>
      </div>

      <div class="scrollXItem"  @click="todetail(201616060302)">
        <img class="ximg" src="http://43.226.148.67:5000/icon/2.jpg"/>
        <p class="title">美艳纯红礼服连衣裙</p>
        <p class="price">￥138</p>
        <s class="orprice">￥158</s>
      </div>

      <div class="scrollXItem"  @click="todetail(201616060303)">
        <img class="ximg" src="http://43.226.148.67:5000/icon/3.jpg"/>
        <p class="title">Intel酷睿i9游戏水冷主机</p>
        <p class="price">￥8399</p>
        <s class="orprice">￥10500</s>
      </div>

      <div class="scrollXItem"  @click="todetail(201616060301)">
        <img class="ximg" src="http://43.226.148.67:5000/icon/1.jpg"/>
        <p class="title">小镇珊珊毛织上衣</p>
        <p class="price">￥138</p>
        <s class="orprice">￥666</s>
      </div>

    </scroll-view>

    <img  class="content" alt="" src="/static/images/contentFoot.jpg">


  </div>
</template>


<script>

  export default {
      created:function(){
          this.scrWidth = wx.getSystemInfoSync().windowWidth;
      },
      data:{
          scrWidth:20,//屏幕原始尺寸
          URL:'http://43.226.148.67:5000/',
          show: false,//产品参数是否显示
          detailJson:666,//产品完整Json数据
          tagSelected:null,
      },
    methods: {
      todetail:(ID) => {
        console.log('点击了一下下');
        wx.navigateTo({
          url: '/pages/details/main?ID=' + ID,
        })
      },

      onChange:function(event) {
            wx.showToast({
                icon: 'none',
                title: `切换至第${event.detail}项`
            });
        }
      },
  }
</script>

<style>

  page {
   background-color: #c9e3f0;
  }
  .header{
    width: 100%;
    height: 250px;
    display: block;
  }
  .content{
    width: 100%;
    height: 50px;
  }
  .scrollX{
    height: 390rpx;
    /*background-color: #c7c7c7;*/
    white-space:nowrap;
  }
  .scrollXItem{
    height: 340rpx;
    width: 200rpx;
    margin-left: 8rpx;
    margin-right: 8rpx;
    display: inline-block;
    overflow: hidden;
    border-radius: 10rpx;
    background-color: white;
  }
  .ximg{
    width: 200rpx;
    height: 200rpx;
  }
  .title{
    width: 180rpx;
    height: 60rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal !important;
    line-height: 36rpx;
    padding: 10rpx;
    font-size: 25rpx;
  }
  .price{
    font-size: 30rpx;
    display: inline-block;
    margin-right: 20rpx;
    margin-left: 5rpx;
    color: #ff702d;
  }
  .orprice{
    font-size: 20rpx;
    text-decoration: line-through;
    display: inline-block;
    color: #aaaaaa;
  }
</style>
